<script lang="ts">
import { defineComponent, ref, onMounted, watch } from 'vue'
import { useRouter } from 'vue-router'
import { useRoute } from 'vue-router'
import { getVideo, getArticleNext, getArticleNextComment, getVideoMid } from '../api/videodes'
import { getimage } from '../hooks/image'
import { playerTime, viewCount, vidotime } from '../hooks/filters'
import { storeToRefs } from 'pinia';
import { useCounterStore } from '../stores/home'
import { showToast } from 'vant';

export default defineComponent({
  components: {},
  setup() {
    let router: any = useRouter()
    let route: any = useRoute()
    let active: any = ref(0)
    let useractive = route.query.useractive;
    let userid = route.query.userid;
    const store = useCounterStore();
    const { likearr, commentlikearr, idarr, collectlikearr, tocked, userInfoheard } = storeToRefs(store)
    // 作为 action 的 increment 可以直接解构
    const { unlikeFuns, likeFuns, uncommentFuns, commentFuns, increment, incrementfalse, getUserInfoFun, collectFuns, uncollectFuns } = store;
    let likeFun = (id: any) => {
      likeFuns(id)
    }
    // 取消喜欢
    let unlikeFun = (id: any) => {
      unlikeFuns(id)
    }

    let istoken = localStorage.getItem('token') != null;
    console.log('istoken=>', istoken)

    interface CommentItem {
      userInfo: UserInfoType
      content: string
      addtime: number
      count_approve: number
      ip_location: number,
      id: number
    }
    interface SimilarVideoItem {
      count: CountNum
      id: number
      title: string
      duration: string
      cover: string
      author: AuthorType
    }
    interface AuthorType {
      role?: string
      userinfo: UserInfoType
    }
    interface UserInfoType {
      avatar: string
      username: string,
      vip_flag: any,
      id: string
    }
    // 点赞对象
    interface CountNum {
      count_like: number
      count_view: number
      count_collect: number
      count_comment: number
      count_share: number
    }
    interface Video {
      cover: string
      title: string
      publish_time: number
      ip_location: string
      content: string
      count: CountNum
      categories: Array<CategoriesItem>
      tags: Array<{ name: string }>
      author: AuthorType,
      id: number,
      team: Array<{
        name: string
        userinfo: UserInfoType
        role: string
      }>
    }
    interface CategoriesItem {
      category_name: string
      sub: {
        category_name: string
      }
    }
    // let videoList: any = ref(null)
    // let similar_video: any = ref(null)
    // let commentList: any = ref(null)
    let similar_video = ref<Array<SimilarVideoItem> | null>(null);
    let commentList = ref<Array<CommentItem> | null>(null);
    let videoList: any = ref(null);
    console.log(active) //返回按钮函数
    let back = () => {
      console.log('点击了返回');
      if (useractive == 1) {
        //
        router.push({
          path: '/albumDes',
          query: {
            useractive,
            user_id: userid,
            id: route.query.id,
          }
        })
      }
      else if (useractive && useractive != 1) {
        router.push({
          path: '/userdetail',
          query: {
            useractive,
            userid
          }
        })
      } else {
        router.back()
      }

    } //视频内容详情
    let videoid = route.query.aid
    let mid = route.query.mid
    console.log('videoid', videoid)
    console.log('mid', mid)
    let getVideoFun = (videoid: number) => {
      getVideo(videoid).then((data) => {
        console.log('视频详情=>', data)
        videoList.value = data.data
        console.log('视频详情videoList=>', videoList)
      })
    }
    let getVideoMidFun = (videoid: number) => {
      getVideoMid(videoid).then((data) => {
        console.log('视频详情=>', data)
        videoList.value = data.data
        console.log('视频详情videoList=>', videoList)
      })
    }
    //获取相似视频
    let getArticleNextFun = (videoid: number) => {
      getArticleNext(videoid).then((data: any) => {
        console.log('相似视频=>', data)
        similar_video.value = data.data.list;
        console.log('相似视频similar_video=>', similar_video.value)
      })
    }
    //获取视频评论
    let getArticleNextCommentFun = () => {
      getArticleNextComment({ resource_id: videoid }).then((data) => {
        console.log('获取视频评论=>', data)
        commentList.value = data.data.list;
        console.log('获取视频评论commentList=>', commentList.value)
      })
    }
    //点击相似视频跳转视频详情
    let click_smilar_video = (aid: number) => {
      videoid = aid;
      console.log('33333', videoid)

      if (videoid) {
        getVideoFun(videoid) //获取视频详情
      } else {
        getVideoMidFun(mid) //获取视频建议详情
      }
      getArticleNextFun(videoid) //获取相似视频
      getArticleNextCommentFun() //获取视频的评论
      newmyCommentList.value = myCommentList.value.filter((item: any) => {
        return item.videoid == videoid
      })
      newmyCommentList.value.sort(function (a: any, b: any) {
        return b.addtime - a.addtime
      })
      console.log('888', videoid)
      router.push({
        path: '/videoDes',
        query: {
          aid: aid
        }
      })
    };
    console.log('22222', videoid)

    // 发评论
    let mycomment: any = ref(null) //输入框输入的内容
    let localarrjson: any = window.localStorage.getItem("VideoComment")
    let localarr = JSON.parse(localarrjson);
    let myCommentList: any = ref(localarr || [])
    let VideoDesMyCommentId = 1113; //评论id
    let newmyCommentList: any = ref([])
    //发评论的回车事件
    let sendMycomment = () => {
      console.log(tocked.value);
      getUserInfoFun();
      if (tocked.value !== null) {
        VideoDesMyCommentId += 1;
        let currentTime = new Date().getTime()
        myCommentList.value.push(
          {
            videoid: videoid,
            id: VideoDesMyCommentId, //这条评论的id
            content: mycomment.value, //评论的内容
            ip_location: "广东",
            addtime: currentTime, //发评论的时间
            count_approve: 0, //评论的点赞数量 默认为0
            userInfo: {
              // avatar: "https://cs.xinpianchang.com/uploadfile/user/2017/04/05/58e4be784ff29.jpeg", //发布评论用户的头像
              // id: 10020974,  //发布评论用户的id
              // username: "董北" //发布评论用户的名字
            }
          }
        )
        mycomment.value = "" //输入完内容后清空输入框
        // 过滤视频id
        newmyCommentList.value = myCommentList.value.filter((item: any) => {
          console.log('555555', item.videoid, videoid)
          return item.videoid == videoid
        })
        newmyCommentList.value.sort(function (a: any, b: any) {
          return b.addtime - a.addtime
        })
        window.localStorage.setItem("VideoComment", JSON.stringify(newmyCommentList.value));
      } else {

        showToast('请登录');
        router.push({
          path: '/register',
        });

      }

    }
    newmyCommentList.value = myCommentList.value.filter((item: any) => {
      return item.videoid == videoid
    })
    newmyCommentList.value.sort(function (a: any, b: any) {
      return b.addtime - a.addtime
    })

    // 删除我发的评论
    let delmycomment = (index: any) => {
      newmyCommentList.value.splice(index, 1)
      window.localStorage.setItem("VideoComment", JSON.stringify(newmyCommentList.value));

    };
    let click_user = (userid: any) => {
      router.push({
        path: '/userdetail',
        query: {
          userid: userid
        }
      })
    }
    const showShare = ref(false);
    const options = [
      [
        { name: '微信', icon: 'wechat' },
        { name: '朋友圈', icon: 'wechat-moments' },
        { name: '微博', icon: 'weibo' },
        { name: 'QQ', icon: 'qq' },
      ],
      [
        { name: '复制链接', icon: 'link' },
        { name: '分享海报', icon: 'poster' },
        { name: '二维码', icon: 'qrcode' },
        { name: '小程序码', icon: 'weapp-qrcode' },
      ],
    ];

    const onSelect = (option: any) => {
      showToast(option.name);
      showShare.value = false;
    };
    // console.log("测试=>", playerTime(1684559228*1000));
    onMounted(() => {
      if (videoid) {
        getVideoFun(videoid) //获取视频详情
      } else {
        getVideoMidFun(mid) //获取视频建议详情
      }
      getArticleNextFun(videoid) //获取相似视频
      getArticleNextCommentFun() //获取视频的评论
      getUserInfoFun();
    })
    return {
      active,
      back,
      videoList,
      similar_video,
      commentList,
      userInfoheard,
      click_smilar_video,
      getimage,
      playerTime,
      viewCount,
      vidotime,

      likeFun,
      unlikeFun,
      commentFuns,
      uncommentFuns,
      increment,
      incrementfalse,
      collectFuns,
      uncollectFuns,
      likearr,
      idarr,
      commentlikearr,
      collectlikearr,
      sendMycomment,
      mycomment,
      newmyCommentList,
      delmycomment, //删除评论的方法

      options,
      onSelect,
      showShare,
      istoken,
      click_user
    }
  }
})
</script>
<template>
  <div class="videodes" v-if="videoList">
    <!-- 顶部导航 -->
    <div class="topbar flex-space">
      <div class="left">
        <span class="iconfont icon-xiangzuojiantou" @click="back"></span>
      </div>
      <div class="right">
        <span class="iconfont icon-itv"></span>
        <van-cell class="iconfont icon-icon_more" style="    width: 17px;
        font-size: 20px;  color: #fff;" @click="showShare = true" />
      </div>
    </div>
    <!-- 视频 -->
    <div class="video">
      <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
      <!-- <img :src="getimage(videoList.cover)" alt="" /> -->
      <video :src="videoList.video.content.progressive[0].url" muted autoplay controls></video>
    </div>
    <div class="null"></div>
    <div class="border"></div>
    <!-- 视频详细介绍 -->
    <div class="introduce">
      <div class="fixed">
        <van-tabs v-model:active="active" color="#e42e22" title-active-color="#444444" title-inactive-color="#989898"
          line-width="28" swipeable sticky :offset-top="210">
          <van-tab title="简介">
            <div class="des">
              <div class="name">
                <!-- 2023"我们一起战斗" -->
                {{ videoList.title }}
              </div>
              <div class="smalltitle">
                <span v-for="(item, index) in videoList.categories" :key="index">{{ item.category_name }}-{{
                  item.sub.category_name }}</span>
                <span>{{ playerTime(videoList.publish_time * 1000) }}</span>
                <span v-if="videoList.ip_location">{{ videoList.ip_location }}</span>
                <span class="playcount">{{ viewCount(videoList.count.count_view) }}次播放</span>
              </div>
              <!-- <div class="playcount">{{ viewCount(videoList.count.count_view) }}次播放</div> -->
              <div class="thanks">
                {{ videoList.content }}
                <!-- 感谢好朋友 -->
                <!-- <span>@ThisNoFire</span> -->
                <!-- 对此片提供的指导和灵感来源。仅用于学习交流未进行商业使用 -->
              </div>
              <!-- <div class="logo">
                  <ul>
                    <li>
                      <span class="iconfont icon-dianzan_huaban"></span>
                      <p>{{ viewCount(videoList.count.count_like) }}</p>
                    </li>
                    <li>
                      <span class="iconfont icon-31shoucang"></span>
                      <p>{{ viewCount(videoList.count.count_collect) }}</p>
                    </li>
                    <li>
                      <span class="iconfont icon-fenxiang2"></span>
                      <p>{{ viewCount(videoList.count.count_share) }}</p>
                    </li>
                  </ul>
                </div> -->
              <div class="logo">
                <ul>
                  <li @click.stop="likeFun(videoList.id)" v-if="!likearr.includes(videoList.id) || !istoken">
                    <span class="iconfont icon-dianzan" style="color:#000;"></span>
                    <p>{{ viewCount(videoList.count.count_like) }}</p>
                  </li>
                  <li @click.stop="unlikeFun(videoList.id)" v-else><span class="iconfont icon-dianzan_kuai "
                      style="color: red;"></span>
                    <p>{{ viewCount(videoList.count.count_like + 1) }}</p>
                  </li>



                  <li @click.stop="collectFuns(videoList.id)" v-if="!collectlikearr.includes(videoList.id) || !istoken">
                    <span class="iconfont icon-31shoucang"></span>
                    <p>
                      {{ viewCount(videoList.count.count_collect) }}
                    </p>
                  </li>
                  <li @click.stop="uncollectFuns(videoList.id)" v-else><span class="iconfont icon-wodeshoucang "
                      style="color: yellow;font-size: 28px;"></span>
                    <p>{{
                      viewCount(videoList.count.count_collect + 1) }}</p>
                  </li>
                  <li>
                    <van-cell class="iconfont icon-fenxiang2" style="    width: 30px;
        font-size: 30px;" @click="showShare = true" />
                    <!-- <span class="iconfont icon-fenxiang2"></span> -->
                    <p>{{ viewCount(videoList.count.count_share) }}</p>
                  </li>
                </ul>
              </div>
              <div class="video_tag">
                <ul>
                  <li v-for="(item, index) in videoList.tags" :key="index">{{ item.name }}</li>
                </ul>
              </div>
              <div class="creator">
                <div class="creator_topbar flex-space">
                  <h1>创作人</h1>
                  <!-- <span>申请加入</span> -->
                </div>


                <div class="creatorlist">
                  <ul>
                    <van-swipe class="my-swipe" :loop="false" :width="263" :show-indicators="false">
                      <van-swipe-item>
                        <li>
                          <div class="creatorleft">
                            <div class="image" @click="click_user(videoList.author.userinfo.id)">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="getimage(videoList.author.userinfo.avatar)" alt="" />
                              <div class="smallimage" v-if="videoList.author.userinfo.vip_flag == 1"
                                style="background-color: #fff;">
                                <img src="../assets/images/177会员、vip.png" alt="" />
                              </div>
                            </div>
                            <div class="creator_name">
                              <p>{{ videoList.author.userinfo.username }}</p>
                              <div class="descript">{{ videoList.author.role }}</div>
                            </div>
                          </div>
                          <div class="creatorright" @click.stop="increment(videoList.author.userinfo.id)"
                            v-if="!idarr.includes(videoList.author.userinfo.id) || !istoken">关注</div>
                          <div class="creatorright" v-else @click.stop="incrementfalse(videoList.author.userinfo.id)">已关注
                          </div>
                        </li>
                      </van-swipe-item>
                      <van-swipe-item v-for="(item, index) in videoList.team" :key="index">
                        <li>
                          <div class="creatorleft">
                            <div class="image" @click="click_user(item.userinfo.id)">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="getimage(item.userinfo.avatar)" alt="" />
                              <div class="smallimage" v-if="item.userinfo.vip_flag == 1" style="background-color: #fff;">
                                <img src="../assets/images/177会员、vip.png" alt="" />
                              </div>
                            </div>
                            <div class="creator_name">
                              <p class="one-text-cut">{{ item.userinfo.username }}</p>
                              <div class="descript">{{ item.role }}</div>
                            </div>
                          </div>
                          <div class="creatorright" @click.stop="increment(item.userinfo.id)"
                            v-if="!idarr.includes(item.userinfo.id) || !istoken">关注</div>
                          <div class="creatorright" v-else @click.stop="incrementfalse(item.userinfo.id)">已关注
                          </div>
                        </li>
                      </van-swipe-item>
                    </van-swipe>
                  </ul>
                </div>
              </div>
              <div class="similar" v-if="similar_video">
                <h1>相似视频</h1>
                <div class="similar_list">
                  <ul>
                    <li v-for="(item, index) in similar_video" :key="index" @click="click_smilar_video(item.id)">
                      <div class="similar_video">
                        <div class="similar_left">
                          <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                          <img :src="getimage(item.cover)" alt="" />
                          <div class="time">{{ vidotime(item.duration) }}</div>
                        </div>
                        <div class="similar_right">
                          <div class="video_name text-cut">{{ item.title }}</div>
                          <div class="video_count">
                            播放量 {{ viewCount(item.count.count_view) }} 喜欢
                            {{ viewCount(item.count.count_like) }}
                          </div>
                          <div class="similar_user">
                            <div class="uerinfo">
                              <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                              <img :src="getimage(item.author.userinfo.avatar)" alt="" />
                              <div class="smallimage" v-if="item.author.userinfo.vip_flag == 1"
                                style="background-color: #fff;">
                                <img src="../assets/images/177会员、vip.png" alt="" />
                              </div>
                            </div>
                            <div class="username">{{ item.author.userinfo.username }}</div>
                          </div>
                        </div>
                      </div>
                    </li>
                  </ul>
                </div>
              </div>
            </div>
          </van-tab>
          <van-tab :title="'评论' + (videoList.count.count_comment + newmyCommentList.length)">
            <div class="commentlit" v-if="commentList">
              <ul>
                <!-- 我发的评论 -->
                <van-swipe-cell v-for="(item, index) in newmyCommentList" :key="index">
                  <li>
                    <div class="userinfo">
                      <img :src="userInfoheard.avatar" />
                      <!-- <div class="smallimage" v-if="item.author.userinfo.vip_flag == 1" style="background-color: #fff;">
                          <img src="../assets/images/177会员、vip.png" alt="" />
                        </div> -->
                    </div>
                    <div class="comment-right">
                      <div class="comment-username flex-space">
                        <span>{{ userInfoheard.username }}</span>
                        <div class="more">
                          <span class="iconfont icon-Androidgengduo"></span>
                        </div>
                      </div>
                      <div class="comment-content">{{ item.content }}</div>
                      <div class="comment-bottom flex-space">
                        <div class="comment-time">
                          {{ playerTime(item.addtime) }} • {{ item.ip_location }}
                        </div>
                        <div class="logo">
                          <div>
                            <span class="iconfont icon-pinglun1"></span>
                          </div>

                          <div v-if="!commentlikearr.includes(item.id) || !istoken" class="like">
                            <span class="iconfont icon-dianzan1" @click.stop="commentFuns(item.id)"></span>
                            <em>{{ item.count_approve }}</em>
                          </div>


                          <div v-else class="like">
                            <span class="iconfont icon-dianzan_kuai" style="color: red;"
                              @click.stop="uncommentFuns(item.id)"></span>
                            <em>{{ item.count_approve + 1 }}</em>
                          </div>

                        </div>
                      </div>
                    </div>
                  </li>
                  <template #right>
                    <van-button square type="danger" text="删除" @click="delmycomment(index)" />
                  </template>
                </van-swipe-cell>
                <li v-for="(item, index) in commentList" :key="index">
                  <div class="userinfo">
                    <!-- <img src="../assets/images/swiper1.webp" alt="" /> -->
                    <img :src="getimage(item.userInfo.avatar)" alt="" />
                  </div>
                  <div class="comment-right">
                    <div class="comment-username flex-space">
                      <span>{{ item.userInfo.username }}</span>
                      <div class="more">
                        <span class="iconfont icon-Androidgengduo"></span>
                      </div>
                    </div>
                    <div class="comment-content">{{ item.content }}</div>
                    <div class="comment-bottom flex-space">
                      <div class="comment-time">
                        {{ playerTime(item.addtime * 1000) }} • {{ item.ip_location }}
                      </div>
                      <!-- <div class="logo">
                          <div>
                            <span class="iconfont icon-pinglun1"></span>
                          </div>
                          <span class="iconfont icon-dianzan1"></span>
                          <em>{{ item.count_approve }}</em>
                        </div> -->
                      <div class="logo">
                        <div>
                          <span class="iconfont icon-pinglun1"></span>
                        </div>

                        <div v-if="!commentlikearr.includes(item.id) || !istoken" class="like">
                          <span class="iconfont icon-dianzan1" @click.stop="commentFuns(item.id)"></span>
                          <em>{{ item.count_approve }}</em>
                        </div>
                        <div v-else class="like">
                          <span class="iconfont icon-dianzan_kuai" style="color: red;"
                            @click.stop="uncommentFuns(item.id)"></span>
                          <em>{{ item.count_approve + 1 }}</em>
                        </div>

                      </div>
                    </div>
                  </div>
                </li>
              </ul>
            </div>
            <div class="pop" v-if="videoList.count.count_comment == 0">暂无评论哦~</div>
          </van-tab>
        </van-tabs>
      </div>
    </div>
    <van-share-sheet v-model:show="showShare" title="立即分享给好友" :options="options" @select="onSelect" />

    <!-- 发评论 -->
    <div class="my-comment" v-show="active == 1">
      <input type="text" placeholder="我有话要说" v-model="mycomment" @keyup.enter="sendMycomment">
    </div>
    <div class="nulldiv" style="width:100%;height:45px"></div>

  </div>
  <br />
</template>
<style lang="scss" scoped>
::v-deep .van-cell {
  padding: 0;
  background: transparent;

  display: inline-block;
  width: 17px;
  font-size: 20px;
  /* line-height: 42px; */
  /* padding-top: 12px;*/
}

.topbar {
  padding: 0 11px 0 18px;
  color: #ffffff;
  height: 42px;
  line-height: 42px;
  position: fixed;
  align-items: center;
  display: flex;
  width: 100%;
  box-sizing: border-box;
  z-index: 3;

  .left {
    span {
      font-weight: 600;
      font-size: 17px;
    }
  }

  .right {
    display: flex;
    align-items: center;

    span {
      font-size: 25px;

      &:first-child {
        margin-right: 15px;
        font-size: 20px;
      }
    }
  }
}

.video {
  position: fixed;
  width: 100%;
  z-index: 2;

  video {
    width: 100%;
    height: 210px;
  }

  img {
    width: 100%;
    height: 210px;
  }
}

.null {
  width: 100%;
  height: 210px;
}

.van-tab {
  border-top: 1px solid #f2f2f2;
}

.border {
  width: 100%;
  height: 1px;
  background-color: #f2f2f2;
  margin-top: 44px;
  position: fixed;
  z-index: 11px;
  top: 210px;
}

.des {
  font-size: 12px;
  padding-top: 15px;

  .name {
    color: #181818;
    font-size: 18px;
    line-height: 34px;
    font-weight: 600;
    padding: 0 18px;
  }

  .smalltitle {
    color: #a5a5a5;
    line-height: 21px;
    margin-top: 4px;
    padding: 0 18px;

    span {
      margin-right: 20px;
    }
  }

  .count {
    line-height: 18px;
  }

  .playcount {
    color: #a5a5a5;
    // padding: 0 18px;
  }

  .thanks {
    color: #111111;
    line-height: 20px;
    margin-top: 12px;
    padding: 0 18px;

    span {
      color: #6092d4;
    }
  }

  .logo {
    height: 80px;
    border-bottom: 1px solid #f3f3f3;

    ul {
      display: flex;
      height: 100%;
      align-items: center;

      li {
        width: 33.33%;
        text-align: center;

        span {
          font-size: 30px;
          color: #000000;
          // font-weight: 600;
        }

        p {
          margin-top: 8px;
          color: #000000;

          font-weight: 600;
        }
      }
    }
  }

  .video_tag {
    margin-top: 10px;
    // height: 53px;
    padding: 0 18px;

    ul {
      display: flex;
      flex-wrap: wrap;
      // height: 53px;
      align-items: center;

      li {
        background-color: #f7f7f7;
        color: #878787;
        margin-right: 12px;
        padding: 5px 11px;
        font-size: 12px;
        margin-bottom: 5px;
      }
    }
  }

  .creator {
    padding: 0 18px;

    .creator_topbar {
      line-height: 58px;
      height: 58px;

      span {
        font-size: 12px;
        color: #da5d47;
      }

      h1 {
        line-height: 58px;
        height: 60px;
        font-size: 16px;
        font-weight: 600;
      }
    }

    .creatorlist {
      ul {
        display: flex;

        .van-swipe-item {
          margin: 3px;
          margin-right: 10px;
        }

        li {
          padding: 10px 11px;
          margin-right: -10px;
          box-sizing: border-box;
          width: 263px;
          display: flex;
          justify-content: space-between;
          align-items: center;
          box-shadow: 0px 0px 5px 2px #f3f3f3;
          border-radius: 10px;

          .creatorleft {
            display: flex;
            align-items: center;

            .image {
              position: relative;

              img {
                width: 47px;
                height: 47px;
                border-radius: 50%;
              }

              .smallimage {
                position: absolute;
                top: 30px;
                right: 0;
                width: 18px;
                height: 18px;
                display: flex;
                align-items: center;
                justify-content: center;
                background-color: rgb(255, 255, 255);
                border-radius: 50%;

                img {
                  width: 18px;
                  height: 18px;
                  border-radius: 50%;
                }
              }
            }

            .creator_name {
              margin-left: 8px;

              p {
                color: #000000;
                font-size: 14px;
                line-height: 20px;
                width: 100%
              }

              .descript {
                color: #9a9a9a;
                font-size: 12px;
              }
            }
          }

          .creatorright {
            background-color: #fdeee9;
            color: #c5271a;
            border-radius: 20px;
            width: 69px;
            height: 26px;
            text-align: center;
            line-height: 26px;
            font-size: 14px;
          }
        }
      }
    }
  }

  .similar {
    padding: 0 18px;

    h1 {
      line-height: 50px;
      padding-top: 4px;
      height: 50px;
      font-size: 16px;
      font-weight: 600;
      width: 100%;
      border-top: 1px solid #f3f3f3;
      margin-top: 16px;
    }

    .similar_list {
      ul {
        li {
          padding-bottom: 14px;
          margin-bottom: 14px;
          border-bottom: 1px solid #fafafa;

          .similar_video {
            display: flex;

            .similar_left {
              position: relative;

              img {
                width: 154px;
                height: 87px;
                border-radius: 10px;
              }

              .time {
                font-size: 12px;
                color: #fff;
                position: absolute;
                bottom: 5px;
                right: 5px;
              }
            }

            .similar_right {
              margin-left: 10px;

              .video_name {
                color: #0a0a0a;
                font-size: 14px;
                font-weight: 600;
                line-height: 19px;
                height: 38px;
                width: 175px;
              }

              .video_count {
                color: #afafaf;
                font-size: 12px;
                line-height: 20px;
                margin-top: 4px;
              }

              .similar_user {
                display: flex;
                align-items: center;
                height: 18px;
              }

              .uerinfo {
                margin-top: 4px;
                position: relative;

                img {
                  width: 14px;
                  height: 14px;
                  border-radius: 50%;
                }

                .smallimage {
                  img {
                    width: 7px;
                    height: 7px;
                    border-radius: 50%;
                    position: absolute;
                    bottom: 0;
                    right: 0;
                  }
                }
              }

              .username {
                color: #595959;
                font-size: 12px;
                margin-left: 4px;
                margin-top: 5px;
                transform: scale(0.9);
              }
            }
          }
        }
      }
    }
  }
}

.commentlit {
  padding: 0 18px;

  .van-button {
    height: 100%;
  }

  ul {
    li {
      padding-top: 17px;
      padding-bottom: 2px;
      display: flex;
      width: 100%;

      .userinfo {
        background-color: #fff;

        img {
          width: 32px;
          height: 32px;
          border-radius: 50%;
        }

        .smallimage {
          position: absolute;
          top: 30px;
          right: 0;
          width: 18px;
          height: 18px;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: rgb(255, 255, 255);
          border-radius: 50%;

          img {
            width: 18px;
            height: 18px;
            border-radius: 50%;
          }
        }
      }

      .comment-right {
        margin-left: 12px;
        border-bottom: 1px solid #f9f9f9;
        flex: 1;

        .comment-username {
          width: 100%;

          span {
            line-height: 20px;
            color: #6d6d6d;
            font-size: 12px;
          }

          .more {
            color: #808080;

            span {
              font-size: 17px;
            }
          }
        }

        .comment-content {
          line-height: 21px;
          color: #232323;
          font-size: 14px;
        }

        .comment-bottom {
          line-height: 33px;
          align-items: center;

          .comment-time {
            color: #b2b2b2;
            font-size: 12px;
          }

          .logo {
            color: #606060;
            display: flex;
            align-items: center;
            margin-right: 10px;

            span {
              font-size: 15px;
              margin-top: -3px;
              margin-right: 4px;

              &:first-child {
                font-size: 17px;
                margin-right: 18px;
                margin-top: 3px;
              }
            }

            .like {
              span {
                margin-right: 5px;

              }
            }

            em {
              font-size: 12px;
            }
          }
        }
      }
    }
  }
}

.pop {
  font-size: 14px;
  text-align: center;
  color: #b2b2b2;
  margin-top: 50px;
}

// 发评论
.my-comment {
  width: 100%;
  height: 45px;
  background-color: #fff;
  position: fixed;
  bottom: 0px;
  box-sizing: border-box;
  padding-left: 16px;
  padding-right: 16px;
  border-top: 1px solid #f3f4f6;

  input {
    outline: none;
    border: none;
    background-color: #f3f4f6;
    width: 100%;
    margin: 5px auto;
    height: 35px;
    text-indent: 10px;
    font-size: 14px;
    border-radius: 5px;
    display: inline-block;
  }
}
</style>
